<template>
	<view class="item" @click="router.push({url: '/commonPage/afterSaleService/afterSaleService', params: { id:
		item.id,look: 'true', type: 'caseOrder'}})">
		<view class="header">
			<view class="order-no">订单编号：{{ item.order_sn }}</view>
		</view>
		<view class="box">
			<view class="col">
				<text>订单状态：</text>
				<view class="status-1">{{ item.status_title }}</view>
			</view>
			<view class="col">
				<view class="text">实付款：¥</view>
				<view class="all-price">{{ item.price}}</view>
			</view>
		</view>
		<view class="box">
			<view class="col">
				<view class="text">开始时间：</view>
				<view class="time">{{ item.create_time}}</view>
			</view>
			<view class="col" v-if="item.finish_time">
				<view class="text">结束时间：</view>
				<view class="time">{{ item.finish_time}}</view>
			</view>
		</view>

		<view class="footer">

			<view class="btn" v-if="!['待付款','待接单'].includes(item.status_title)&& item.is_back === 0"
				@click.passive.stop="afterService">
				<text class="iconfont icon-tuikuan"></text>
				申请售后
			</view>
			<view class="btn" @click.passive.stop="afterServiceInfo"
				v-else-if="!['待付款','待接单'].includes(item.status_title)&& item.is_back === 1">
				<text class="iconfont icon-tuikuan"></text>
				售后进度
			</view>
			<view class="btn" v-if="item.status_title === '待付款'" @click.passive.stop="payService">
				<text class="iconfont icon-tuikuan"></text>
				付款
			</view>
			<view class="btn" v-if="item.status_title === '服务中'" @click.passive.stop="orderOk">
				<wd-icon name="check" size="22rpx"></wd-icon>
				订单完成
			</view>
			<view v-if="item.status_title === '已结束'" class="btn" @click.passive.stop="del">
				<text class="iconfont icon-shanchu2"></text>
				删除订单
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { ref, defineComponent } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	export default defineComponent({
		name: 'QueryItem',
		props: {
			// 定义props
			item: {
				type: Object,
				required: true
			},
		},
		setup(props, { attrs, slots, emit }) {
			const router = useRouter();
			const del = () => {
				emit('deleteItem', props.item)
			};
			const afterService = () => {
				emit('afterService', props.item)
			}
			const afterServiceInfo = () => {
				emit('afterServiceInfo', props.item)
			}
			const payService = () => {
				emit('payService', props.item)
			}
			const orderOk = () => {
				emit('orderOk', props.item)
			}
			return {
				router,
				del,
				afterService,
				afterServiceInfo,
				payService,
				orderOk
			};
		}
	});
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 24rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 42rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 13rpx;

		.header,
		.box {
			display: flex; // 设置flex布局，使子元素在一行内显示
			justify-content: space-between; // 设置子元素水平居中显示，根据实际需求调整对齐方式，如space-around等
			padding: 20rpx 25rpx; // 设置内边距，根据实际需求调整数值，如20rpx 25rpx表示上下内边距为20rpx，左右内边距为25rpx。
		}

		.col {
			display: flex;
			font-size: 40rpx;
		}

		.footer {
			background: #c91c1f;
			padding: 20rpx 25rpx;
		}

		.footer {
			padding: 20rpx 0;
			display: flex;
			font-family: PingFang;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			justify-content: flex-end; // 水平居右对齐

			.btn {
				color: #ffffff;
				padding: 0 40rpx;
				position: relative;
				display: flex;
				align-items: center; // 垂直居中

				.iconfont {
					color: #ffffff; // 设置图标颜色，根据实际图标调整
					margin-right: 10rpx;
				}

				.icon-shanchu2 {
					font-size: 38rpx;
				}
			}

			.btn::after {
				content: ' ';
				display: inline-block;
				width: 1rpx;
				height: 19rpx;
				background: #999999;
				opacity: 0.38;
				position: absolute;
				right: 0;
				top: 10rpx;
			}

			.btn:last-child::after {
				display: none; // 最后一个按钮没有竖线分割线
			}
		}

		.header {
			border-radius: 13rpx 13rpx 0 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between; // 水平居中
			font-family: PingFang;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;

		}

		.footer {
			background: #c91c1f;
			border-radius: 0 0 13rpx 13rpx;
		}

		.box {
			display: flex;
			flex-direction: row;
			justify-content: space-between; // 垂直居中
			padding: 20rpx 25rpx 0rpx; // 设置内边距，使内容与边框有一定的距离

			.col {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				line-height: 60rpx; // 设置行高，使文字垂直居中
				font-family: PingFang;
				font-weight: 400;
				font-size: 24rpx;
				position: relative;

				.order-no {
					color: #999999;
				}

				.type {
					color: #000000;
					margin-left: 60rpx;
				}

				.price {
					color: #c91c1f;
					margin-left: 80rpx;
				}

				.number {
					color: #999999;
					position: absolute;
					right: 0;
				}

				.text {
					font-family: PingFang;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.all-price {
					font-size: 50rpx;
					color: #c91c1f;
					margin-left: 10rpx;
				}
			}

			.col:nth-child(2) {
				// margin-top: 24rpx;
				justify-content: flex-end;
			}
		}

		.box:nth-child(2) {
			border-bottom: 2rpx solid #eeeeee;
			padding-bottom: 24rpx;

			.col:nth-child(1) {
				font-size: 28rpx;
				color: #999999;
			}

			.status {
				color: #333333; // 设置状态文字颜色为红色，根据实际状态值调整颜色
			}

			.status-1,
			.status-2,
			.status-3,
			.status-5 {
				color: #c91c1f;
			}

			.status-4 {
				color: #11bb65;
			}
		}

		.box:nth-child(3),
		.box:nth-child(4) {
			padding: 0 25rpx; // 设置内边距，根据实际需求调整数值，如20rpx 25rpx表示上下内边距为20rpx，左右内边距为25rpx。
			font-size: 20rpx;
			flex-direction: column;
			align-items: baseline;

			.col {
				line-height: 40rpx; // 设置行高，使文字垂直居中
			}

			.col:nth-child(2) {
				justify-content: flex-end;
			}
		}

		.box:nth-child(3) {
			margin-top: 24rpx;
			padding-bottom: 24rpx;
		}

		.box:nth-child(4) {
			padding-bottom: 24rpx;
		}
	}
</style>